@import "src/variables";

a{
  text-decoration: none;
}
.sidebar-nav-container {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 11vw;
  min-width: 150px;
  background: $sidebar-dark-background-color;
  color: $default-white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-box-shadow: 7px 0px 24px -2px $box-shadow-color;
  -moz-box-shadow: 7px 0px 24px -2px $box-shadow-color;
  box-shadow: 7px 0px 24px -2px $box-shadow-color;


  .nav-header{
    z-index: 99;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    top: 16px;
    right: 0;
    left: 0;
    min-width: 650px;
    img{
      height: 28px;

    }
    span{
      background: $default-black;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      color: $default-white;
      font-size: 1.1em;
      font-weight: lighter;
      padding: 12px;
      align-self: flex-start;
    }
    .button-row-left{
      margin-top: 8px;
      a{

        margin-left: 8px;
        font-weight: lighter;
        color: $grey-font-color;
        cursor: pointer;
        border-radius: 5px;
        padding: 12px;
        img{
          margin-left: 8px;
          height: 24px;
        }
        &:hover{
          background: $github-button-background-color;
          color: $default-white;
          opacity: 0.9;
        }
      }
        @media only screen and (max-width: 800px) {
          #fork-me-button{
            display: none;
        }
      }
    }
    .button-row-right{
      display: flex;
      flex-direction: row;
      position: fixed;
      right: 16px;

      .button{
        background:$default-white;
        color: $default-black;
        cursor: pointer;
        a{
          color: $github-button-background-color;
        }

        &:hover{
          background: $dark-background-color;
          color: $default-white;
          a{
            color: $default-white;
          }
        }
      }

      .github-button{
        font-size: 1.1em;
        padding: 8px;
        img{
          margin-right: 8px;
        }
        display: flex;
        align-items: center;
        justify-items: center;
        //margin-right: 16px;
        border-radius: 5px;
        outline: none;
        border: none;

      }
      .logged-in{
        display: flex;
        margin-right: 8px;
        align-items: center;
        justify-items: center;
        background: none;
        color: $default-white;
        cursor: default;
        &:hover{
          background:none;
        }
      }


  }
  }

  .nav-container {
    position: relative;
    padding: 0;
    margin: 0;

    &__element {
      height: 60px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      display: flex;
      margin: 16px 0;
      min-width: 110px;
      list-style-type: none;
      background: $dark-background-color;
      color: $default-white;
      display: flex;
      align-items: center;
      align-self: flex-end;
      -webkit-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      -moz-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      box-shadow: 7px 0px 24px -2px $box-shadow-color;
      text-decoration: none;
      padding: 0 16px;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */

      li {
          font-size: 18px;
      }

      &:hover,
      &.isActive {
        background: $default-white;
        color: $dark-background-color;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }
      &:hover{
        background: $default-white;
      }

    }

  }
}
